<template>
  <div class="comments">
    <ul v-if="commentPeoples.length>0">
      <li v-for="(item,index) in commentPeoples" :key="index">
        <div class=fansPic>
          <img :src="item.headPic" alt>
        </div>
        <div class="comInfo">
          <p class="fansName">{{item.name}}</p>
          <p class="comment">{{item.commentText}}</p>
        </div>
        <div class="commentTime">
          <span>{{item.commentTime}}</span>
        </div>
      </li>
    </ul>
    <div v-else>数据正在加载...</div>
  </div>
</template>
<script>
export default {
  name: "CommentList",
  data() {
    return {
    
    }
  },
  props: {
    commentPeoples: {
      type: Array,
      default: []
    }
  }
}
</script>
<style lang="less" scoped>
  .comments{
    margin-top: 10px;
    ul{
      padding-bottom: 10px; 
      
      li{
        height: 80px;
        .fansPic,.comInfo,.commentTime{
          float: left;
        }
        .fansPic{
          width: 20%;
          img{
            width: 60px;
            height: 60px;
          }
        }
        .comInfo{
          width: 60%;
          
          .fansName{
            font-size: 14px;
            color: #808080;
          }
          .comment{
            font-size: 12px;
            color: #808080;
            margin-top: 20px;
          }
        }
        .commentTime{
          width: 20%;
          font-size: 12px;
          color: #808080;
        }
      }
    } 
  }
</style>


